<!-- 李向阳封装的动态输入框和下拉框和按钮组件 -->
<template>
    <div class="DynamicForm" :style="{ width: width, height: height, backgroundColor: backgroundColor }">
        <!-- 动态输入框 -->
        <div v-for="(input, index) in inputs" :key="index">
            <label>{{ input.label || '' }}</label>
            <el-input v-model="input.value" :placeholder="input.placeholder" :type="input.type || 'text'"
                :size="input.size || 'medium'" :style="{ width: input.width || 'auto' }" />
        </div>


        <!-- 动态下拉框 -->
        <div v-for="(select, index) in selects" :key="index">
            <label>{{ select.label || '' }}</label>
            <el-select v-model="select.value" :placeholder="select.placeholder" :size="select.size || 'medium'"
                :style="{ width: select.width || 'auto' }">
                <el-option v-for="(option, idx) in select.options" :key="idx" :label="option.label"
                    :value="option.value" />
            </el-select>
        </div>

        <!-- Cascader 级联选择器:下拉框可以多级分类 -->
        <div v-for="(cascader, index) in cascaders" :key="index">
            <label>{{ cascader.label || '' }}</label>
            <el-cascader v-model="cascader.value" :options="cascader.options" :props="{ expandTrigger: 'hover' }"
                @change="handleCascaderChange(cascader.value, index)" />
        </div>

        <!-- 动态按钮 -->
        <div>
            <el-button v-for="(button, index) in buttons" :key="index" :type="button.type || 'primary'"
                :plain="button.plain || false" :size="button.size || 'medium'"
                @click="handleButtonClick(button.action)">
                {{ button.label || '' }}
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 整体的宽高
        width: {
            type: String,
            default: 'auto'
        },
        height: {
            type: String,
            default: 'auto'
        },
        backgroundColor: {
            type: String,
            default: '#fff'
        },
        // 输入框配置
        inputs: {
            type: Array,
            default: () => []
        },
        // 下拉框配置
        selects: {
            type: Array,
            default: () => []
        },
        // 按钮配置
        buttons: {
            type: Array,
            default: () => []
        },
        cascaders: {
            type: Array,
            default: () => [] // 级联选择器的数据
        }
    },
    data() {
        return {};
    },
    methods: {
        // Cascader 变化时触发的事件
        handleCascaderChange(value, index) {
            console.log(`级联选择器 ${index + 1} 的值: `, value);
            // 在这里可以根据 index 或值执行不同的操作
        },
        // 按钮点击时触发的逻辑
        handleButtonClick(action) {
            // 将输入框和下拉框的值传递给父组件
            const data = {
                inputs: this.inputs,
                selects: this.selects,
                cascaders: this.cascaders
            };
            // 通过 $emit 触发事件，将数据传递给父组件
            this.$emit('form-submit', data);

            // 如果有按钮的自定义行为
            if (action) {
                action();
            }
        }
    }
};
</script>

<style scoped lang="scss">
.DynamicForm {
    padding: 1%;
    margin-bottom: 1%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
</style>
